<template>
  <div id="app">
    <!-- 输入框 -->
    <a-input placeholder="Basic usage" :value="iptValue" class="my_ipt"  @change="changeIptValue"/>
    <!-- 添加按钮 -->
    <a-button type="primary" @click="addItemTodolist()">
      添加事项
    </a-button>

    <a-list bordered :data-source="changeItemList" class="my_list">
      <a-list-item slot="renderItem" slot-scope="item">
        <a-checkbox :checked='item.done' @change="(e) => { changeckStatus(e,item.id) }">{{ item.info }} </a-checkbox>
        <a slot="actions" @click="delItemTodolist(item.id)">删除</a>
      </a-list-item>
      <div slot="footer" class="footer">
        <span class="dataNum">{{unDoneLength}}条剩余</span> 
        <div class="btns">
          <a-button :type="btnStatus === 'all' ? 'primary' : 'default'" @click="changeBtnStatus('all')">
          全部
        </a-button>
        <a-button :type="btnStatus === 'undone' ? 'primary' : 'default'"  @click="changeBtnStatus('undone')">
          未完成
        </a-button>
        <a-button :type="btnStatus === 'done' ? 'primary' : 'default'"  @click="changeBtnStatus('done')">
          已完成
        </a-button>
        </div>
        <a class="clearBtn" @click="clearDone">清除已完成</a>
      </div>
    </a-list>
  </div>
</template>

<script>
import { mapState, mapGetters} from 'vuex'
export default {
  data() {
    return {};
  },
  created(){
    this.$store.dispatch('getList')
  },
  computed:{
    ...mapState(['list','iptValue','btnStatus']),
    ...mapGetters(['unDoneLength','changeItemList'])
  },
  methods:{
    //获取input框的值
    changeIptValue(e){
      this.$store.commit('setIptValue',e.target.value)
    },
    //添加列表项
    addItemTodolist(){
      if(this.iptValue.trim().length===0){
        return this.$message.warning('文本框的内容不能为空！')
      }
      this.$store.commit('addItemTodolist')
    },
    //删除列表项
    delItemTodolist(id){
      this.$store.commit('delItemTodoList',id)
    },
    //复选框状态更改
    changeckStatus(e,id){
      const params={
        status:e.target.checked,
        id:id
      }
      this.$store.commit('changeCkStatus',params)
    },
    //根据按钮切换数据
    changeBtnStatus(key){
      console.log(key);
      this.$store.commit('changeBtnStatus',key)
    },
    //清除已完成
    clearDone(){
      this.$store.commit('clearDone')
    }
  }
};
</script>

<style scoped>
#app {
  margin: 20px;
}
.my_ipt {
  width: 500px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.my_list{
  width: 500px;
}
.footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
